<template>
    <div v-transfer-dom>
        <popup v-model="showPop" height="100%" style="background-color:#fff" @on-first-show="resetScroller">
            <x-header :left-options="{backText: '',preventGoBack:true}"
            @on-click-back="hideThis()" ref="hb">选择图片<a slot="right" style="color:#fff" @click="upImg">确定</a></x-header>
            <scroller height="-45" lock-x @on-scroll="onScroll" ref="scroller">
                <div>
                    <grid>
                        <grid-item v-for="(img,index) in imgList" @click.native="addImg(index,img)">
                            <img slot="icon" :src="img.src">
                        </grid-item>
                    </grid>
                </div>
            </scroller>   
        </popup>
        <actionsheet v-model="showAct" :menus="menus" theme="android" @on-click-menu="clickMenu"></actionsheet>
    </div>
</template>

<script>
import Popup from 'vux/src/components/popup/index'
import TransferDom from 'vux/src/directives/transfer-dom'
import Scroller from 'vux/src/components/scroller/index.vue'
import Actionsheet from 'vux/src/components/actionsheet/index.vue'
import XHeader from 'vux/src/components/x-header/index.vue'
import {Grid, GridItem} from 'vux/src/components/grid'


export default {
    directives: {
        TransferDom
    },
    components:{
        Popup,
        Scroller,
        XHeader,
        Grid,
        GridItem,
        Actionsheet
    },
    props:{
        show:{
            type:Boolean,
            required:true
        }
    },
    data(){
        return{
            showPop:false,
            imgList:[
                {
                    src:'',
                    isClickAdd:true,
                    serverId:''
                }
            ],
            num:9,
            serverIds:[],
            showAct:false,
            menus:[
                {
                    label:'删除',
                    type:'warn',
                    value:'1'
                }
            ],
            index:0
        }
    },
    watch:{
        show (val) {
            this.showPop = val;
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        resetScroller () {
            this.$nextTick(() => {
                this.$refs.scroller.reset();
            });
        },
        getImgs(){

        },
        syncUpload(localIds){
            let _this = this;
            let local = localIds.pop();
            wx.uploadImage({
                localId: local, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    let serverId = res.serverId; // 返回图片的服务器端ID
                    _this.serverIds.push(serverId);
                    --_this.num;
                    wx.getLocalImgData({
                        localId: local, // 图片的localID
                        success: function (res) {
                            let obj = {};
                            obj.src = res.localData; // localData是图片的base64数据，可以用img标签显示
                            obj.isClickAdd = false;
                            obj.serverId = serverId;
                            _this.imgList.push(obj);
                        }
                    });
                    if(localIds.length > 0){
                        _this.syncUpload(localIds);
                    }
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        },
        onScroll(pos) {
            this.scrollTop = pos.top
        },
        hideThis(){
            this.$emit("on-hide",'');
        },
        addImg(index,img){
            if(img.isClickAdd){
                this.getImgs();
            }else{
                this.showAct = true;
                this.index = index;
            }
        },
        clickMenu(){
            let _this = this;
            _this.imgList.splice(_this.index,1);
        },
        upImg(){
            let obj = {};
            let list = [];
            for(let i=1; i<this.imgList.length; i++){
                list.push(i.serverId);
            }
            if(list.length > 0){
                obj.text = '已选择'+list.length+'张图片';
                obj.list = list;
            }
            this.$emit("on-hide",obj);
        }
    }
}
</script>

<style lang="less">

</style>
